<template>
  <div class="source-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>成绩录入</span>
        </div>
      </template>
      <el-form :inline="true" :model="form" @submit.prevent>
        <el-form-item label="课程名">
          <el-input v-model="form.cname" placeholder="输入课程名称" clearable />
        </el-form-item>
        <el-form-item label="学生名">
          <el-input v-model="form.sname" placeholder="输入学生姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" border v-loading="loading">
        <el-table-column prop="course_name" label="课程" min-width="160" />
        <el-table-column prop="student_number" label="学号" width="120" />
        <el-table-column prop="student_id" label="学生ID" width="90" />
        <el-table-column prop="sc_daily_score" label="平时成绩" width="140">
          <template #default="{ row }">
            <el-input-number v-model="row.sc_daily_score" :min="0" :max="100" :step="1" @change="recalc(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="sc_exam_score" label="考试成绩" width="140">
          <template #default="{ row }">
            <el-input-number v-model="row.sc_exam_score" :min="0" :max="100" :step="1" @change="recalc(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="sc_score" label="总成绩" width="100" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="onSave(row)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pager">
        <el-pagination
          background
          layout="prev, pager, next, jumper, total"
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          @current-change="onPageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getSourceListAPI, updateSourceAPI } from '@/api/teacher/source.js'

const route = useRoute()

const form = reactive({
  cname: route.query.cname || '',
  sname: ''
})

const list = ref([])
const loading = ref(false)
const total = ref(0)
const pageNo = ref(1)
const pageSize = ref(10)

const fetchList = async () => {
  loading.value = true
  try {
    const data = await getSourceListAPI({
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      cname: form.cname,
      sname: form.sname
    })
    // 返回的是 { total, pageNo, pageSize, list }
    total.value = data.total
    pageNo.value = data.pageNo
    pageSize.value = data.pageSize
    list.value = data.list
  } finally {
    loading.value = false
  }
}

const onSearch = () => {
  pageNo.value = 1
  fetchList()
}

const onReset = () => {
  form.cname = ''
  form.sname = ''
  pageNo.value = 1
  fetchList()
}

const onPageChange = (p) => {
  pageNo.value = p
  fetchList()
}

const recalc = (row) => {
  const d = Number(row.sc_daily_score) || 0
  const e = Number(row.sc_exam_score) || 0
  // 总评：平时40% + 期末60%，四舍五入为整数
  row.sc_score = Math.round(d * 0.4 + e * 0.6)
}

const onSave = async (row) => {
  await updateSourceAPI({
    id: row.sc_id,
    daily_score: row.sc_daily_score,
    exam_score: row.sc_exam_score,
    score: row.sc_score
  })
  // 成功提示已在拦截器统一处理
  fetchList()
}

onMounted(fetchList)
</script>

<style lang="scss" scoped>
.source-container {
  padding: 20px;
}
.pager {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
